<!-- Dom模板 -->
<template>
    
  <div style="position: relative; width: 100%;height: calc(100vh - 6.1244rem);">
     <!-- Dom内容 -->
    <div class="bookload" v-if="show">
      <div class="content" v-for="(item, index) in arr" :key="index">
        <div class="content_list">
          <div class="content_left">
            <img :src="item.book_img_url" alt="" />
          </div>
          <div class="content_right">
            <p class="content_title">{{ item.bookname }}</p>
            <span class="content_total">共{{ item.number }}集</span>
            <p class="content_jiazai">
              <span
                :style="{
                  width: `${(item.downloadList.length / item.number) * 1000}%`,
                }"
                class="content_jiazai_p"
              ></span>
            </p>
            <span>已下载{{ item.downloadList.length }}集</span>
          </div>
        </div>
      </div>
    </div>
      
    <div v-if="!show" class="kong">
      <p class="iconfont icon-shoutidai">?</p>
      <p>你还没有下载的内容哦</p>
    </div>
  </div>
</template>

<script>
// import a from './a'; // 引入组件
export default {
  data() {
    return {
      msg: "测试",
      show: true,
      arr: [],
    };
  }, // 生命周期 - 创建完成（访问当前this实例）
  created() {}, // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    if (sessionStorage.getItem("userId")) {
      this.$store
        .dispatch("bags/getUserMsg", {
          userid: sessionStorage.getItem("userId"),
        })
        .then((res) => {
          this.$store.state.bags.dowloadData.forEach((item, index) => {
            let findIndex = this.arr.findIndex((item1, index1) => {
              return item1.bookid === item.bookid;
            });
            console.log(item);
            if (findIndex === -1) {
              item.downloadList = [
                {
                  downloadid: item.downloadid,
                  diversity: item.diversity,
                },
              ];
              this.arr.push(item);
            } else {
              this.arr[findIndex].downloadList.push({
                downloadid: item.downloadid,
                diversity: item.diversity,
              });
            }
          });
        });
    } else {
      this.show = false;
    }
  }, // Vue方法定义
  methods: {},
};
</script>

<style scoped>
/* @import url(); 引入css类 */
@import url("../../../static/fonts/iconfont.css");
.kong {
  /* width: 50%;
  height: 250px;
  line-height: 50px;
  margin-left: 25%;
  margin-top: 100px; */
  top: 50%;
  left: 50%;
  margin-top: -0.933333rem;
  margin-left: -2.133333rem;
  position: absolute;
}
.kong p:nth-child(1) {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  font-size: 35px;
  transform: rotate(-30deg);
  padding-left: 60px;
}
.kong p:nth-child(2) {
  font-size: 16px;
  font-family: PingFangSC-regular;
}
.bookload {
  width: 100%;
  height: calc(100vh - 6.1244rem);
  padding: 0.4rem 0.4rem 1.333333rem;
  overflow-y: auto;
  
}

.content {
  width: 100%;
  margin-right: 0.266667rem;
}
.content_list {
  width: 100%;
  height: 3.466667rem;
  /* margin: 0.266667rem 0; */
}
.content_left {
  width: 2.746667rem;
  height: 3.2rem;
  border-radius: 0.206667rem;
  float: left;
  margin: 0.133333rem;
}
.content_left img {
  width: 100%;
  height: 100%;
  border-radius: 0.206667rem;
}
.content_right {
  width: calc(100% - 3.2rem);
  height: 100%;
  float: right;
  position: relative;
}
.content_right > span:last-of-type {
  position: absolute;
  bottom: 0.266667rem;
  left: 0;
}
.content_title {
  font-size: 0.48rem;
  line-height: 0.8rem;
  margin-bottom: 0.4rem;
  margin-top: 0.133333rem;
}
.content_jiazai {
  display: inline-block;
  position: relative;
  background-color: rgb(245, 241, 241);
  width: 75%;
  height: 10px;
  border-radius: 5px;
  vertical-align: middle;
}
.content_jiazai_p {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  width: 60%;
  height: 10px;
  border-radius: 5px;
  background-color: rgb(241, 82, 118);
}

.content_total {
  display: inline-block;
  margin-bottom: 0.533333rem;
}
</style>